<template>
  <div :class="['record', 'pad']">
    <nav-bar />
    <div class="lists">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          :immediate-check="false"
          :offset="10"
          v-if="list.length > 0"
        >
          <div class="listItem van-hairline--bottom" v-for="item in list" :key="item.taskId" @click="handleItem(item)">
            <div class="top">
              <div class="title">
                <img src="@/assets/class.svg" style="width: 0.8rem;height: 0.8rem;"/>
                <span class="classContent">{{ item.className }}</span>
                <img src="@/assets/right.svg" style="width: 0.5rem;height: 0.5rem;margin-left: 20px;"/>
              </div>
              <div class="mark">共<span style="margin: 3px 3px;font-weight: bold;font-size: 16px;">{{ item.signUpNumber }}</span>人</div>
            </div>
            <div class="btm">
              <span class="course">{{ item.courseName }}</span>
              <span class="courseTime">{{ item.classTime }}</span>
            </div>
            <div style="width:100%;height:1px;margin:10px auto;padding:0px;background-color:#D5D5D5;overflow:hidden;"></div>
            <div class="address"> <img src="@/assets/address.svg" style="width: 0.6rem;height: 0.6rem;"/>  <span class="addressContent">{{ item.classPlace }}</span></div>
          </div>
        </van-list>
        <van-empty description="暂无数据" style="padding: 4.2333rem 0;" v-else />
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { signClassCourse } from '@/api/signIn.js'
import NavBar from '@/components/NavBar'
export default {
  components: {
    NavBar
  },
  provide: {
    info: {
      title: '课表',
      leftArrow: false
    }
  },
  data() {
    return {
      lists: [],
      list: [],
      list_new: [],
      loading: false,
      finished: false,
      isLoading: false,
      badge1: '',
      badge2: ''
    }
  },
  created() {
    document.title = '爱学坊教师点名系统'
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 下拉刷新
    async onRefresh() {
      // this.condition.currPage = 1
      this.finished = false
      await this.getList()
    },
    async onLoad() {
      const res = await signClassCourse()
      this.list_new = res.data
      this.list_new.forEach(v => {
        this.list.push(v)
      })
      // // 加载状态结束
      this.isLoading = false
      this.loading = false
      this.finished = true
    },
    // 列表请求会在多处使用，所以放在了一个方法里
    async getList() {
      this.list = []
      const res = await signClassCourse()
      this.list = res.data
      this.isLoading = false
      this.loading = false
      this.finished = true
    },
    handleItem(val) {
      this.$router.push({
        name: 'student',
        query: {
          schoolId: val.schoolId,
          classId: val.classId,
          courseName: val.courseName
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.pad {
  padding-top: 46px;
}
.classContent{
  margin-left: 10px;
}
.address{
  font-size: 10px;
  color: #b6b6b6;
  display: flex;
  align-items: center;
}
.addressContent{
  margin-left: 10px;
}
.courseTime{
  margin-top: 6px;
  text-align: left;
  font-size: 12px;
  color: #76797e;
  margin-left: 20px;
}
.course{
  margin-top: 6px;
  text-align: left;
  font-size: 14px;
}
.record {
  width:100%;
  height:100%;
  position:fixed;
  background-color: #f5fafe;
  text-align: center;
  .search {
  }
  .lists {
    ::v-deep .van-pull-refresh {
      background: #f5fafe;
    }
    .listItem {
      display: flex;
      flex-direction: column;
      margin: 10px;
      padding: 10px;
      box-sizing: border-box;
      background: #fff;
      border-radius: 5px;
      .top {
        display: flex;
        justify-content: space-between;
        .title {
          font-size: 17px;
          font-weight: bold;
          color: #191f25;
          display: flex;
          align-items: center;
        }
        .mark {
          font-size: 13px;
          color: #2fc25b;
        }
      }
      .btm {
        margin-top: 6px;
        text-align: left;
        color: #646566;
        font-size: 13px;
      }
      .remark {
        width: 300px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>
